<template>
  <div class="zengjia">
    <div class="top">添加医生</div>
    <div class="center">
      <div class="center_box">
        <div class="name">
          <p>医生姓名：</p>
          <input type="text" v-model="list.name"  placeholder="姓名"/>
        </div>
        <!-- <div class="img">
          <p>医生头像:</p>
          <div class="img_box">
            <img src="" alt="" />
          </div>
        </div> -->
        <div class="zhicheng">
          <p>医生职称:</p>
          <input type="text" v-model="list.zhicheng" placeholder="请输入职称"/>
        </div>
        <div class="yiyuan">
          <p>所属医院:</p>
         <input type="text" v-model="list.yiyuan" placeholder="请输入医院"/>
        </div>
        <div class="keshi">
          <p>所属科室:</p>
         <input type="text" v-model="list.keshi" placeholder="请输入科室"/>
        </div>
        <div class="feiyong">
          <p>挂号费用:</p>
          <div>
            <input type="text"  v-model="list.feiyong"/>
            ￥
          </div>
        </div>
        <div class="shoufei">
          <p>问诊收费:</p>
          <div>
            <span>图文</span>
            <div>
              <input type="text" v-model="list.shoufei"/>
              元/次
            </div>
          </div>
        </div>
        <div class="button">
          <button @click="store.add(list)">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";

import { useyisheng } from "../../../stores/counter";

let store = useyisheng()

var list = ref([
  {
    name:"",
    zhicheng:"",
    yiyuan:"",
    keshi:"",
    feiyong:"",
    shoufei:""
  }
])


</script>

<style lang="scss" scoped>
.zengjia {
  width: 100%;
  height: 100%;
  background-color: gray;
  .top {
    width: 100%;
    height: 100px;
    background-color: white;
    font-weight: 700;
    font-size: 32px;
    line-height: 100px;
  }
  .center {
    width: 100%;
    // background-color: red;
    padding: 0 20px;
    box-sizing: border-box;
    .center_box {
      width: 100%;
      background-color: white;
      padding-left: 100px;
      box-sizing: border-box;
      font-size: 14px;
      color: gray;
      .name {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        p {
          margin-right: 20px;
        }
        input {
          width: 200px;
          height: 30px;
          border-radius: 5px;
          border: 1px solid gray;
          outline: none;
        }
      }
      .img {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        p {
          margin-right: 50px;
        }
        .img_box {
          width: 60px;
          height: 60px;
          background-color: pink;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .zhicheng {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        p {
          margin-right: 34px;
        }
        input {
          width: 200px;
          height: 30px;
          border-radius: 5px;
          border: 1px solid gray;
          outline: none;
        }
      }
      .yiyuan {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        p {
          margin-right: 34px;
        }
        input {
          width: 200px;
          height: 30px;
          border-radius: 5px;
          border: 1px solid gray;
          outline: none;
        }
      }
      .keshi {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        p {
          margin-right: 34px;
        }
        input {
          width: 200px;
          height: 30px;
          border-radius: 5px;
          border: 1px solid gray;
          outline: none;
        }
      }
      .feiyong {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;

        p {
          margin-right: 35px;
        }
        div {
          input {
            width: 80px;
            height: 20px;
            border: 1px solid gray;
            border-radius: 5px;
            outline: none;
          }
          color: gray;
        }
      }
      .shoufei {
        width: 100%;
        height: 90px;
        display: flex;
        align-items: center;
        p{
          margin-right: 40px;
        }
        div{
          display: flex;
          align-items: flex-end;
          span{
            color: black;
            margin-right: 10px;
          }
          div{
            input{
              width: 100px;
              height: 30px;
              outline: none;
            }
            }
        }
      }
      .button{
        width: 100%;
        height: 80px;
        text-align: center;
        line-height: 80px;
        button{
          width: 100px;
          height: 50px;
          background-color: blue;
          color: white;
        }
      }
    }
  }
}
</style>